<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>golang 分布式调度平台</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>后台管理 <small>golang</small></h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" type="button" id="new-job">新建任务</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="margin-top: 20px">
                <div class="panel-body">
                    <table id="job-list" class="table table-striped">
                        <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>shell命令</th>
                            <th>cron</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑任务</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="edit-name">任务名称</label>
                        <input type="text" class = "form-control" id="edit-name" placeholder="任务名称">
                    </div>
                    <div class="form-group">
                        <label for="edit-command">shell命令</label>
                        <input type="text" class = "form-control" id="edit-command" placeholder="shell命令">
                    </div>
                    <div class="form-group">
                        <label for="edit-cron">cron表达式</label>
                        <input type="text" class = "form-control" id="edit-cron" placeholder="cron表达式">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-job">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    function refreshJobList(){
        $.ajax({
            url:'/job/list',
            dataType: 'json',
            success:function (resp) {
                if(resp.errorNo!==0){
                    alert(resp.msg);
                    return
                }

                $('#job-list tbody').empty();

                var joblist = resp.data;


                for(var i=0;i<joblist.length;i++){
                    var job = joblist[i];
                    var tr = $("<tr>");
                    tr.append($('<td class="job-name">').html(job.name));
                    tr.append($('<td class="job-command">').html(job.command));
                    tr.append($('<td class="job-cronExpr">').html(job.cronExpr));
                    var toolbar = $('<div class="btn-toolbar">')
                        .append('<button class="btn btn-info   edit-job">编辑</button>')
                        .append('<button class="btn btn-danger  delete-job">删除</button>')
                        .append('<button class="btn btn-warning kill-job">强杀</button>');
                    tr.append($('<td>').append(toolbar));
                    $("#job-list tbody").append(tr)
                }

            }
        })
    }
</script>

<script>
$(document).ready(function () {
    $("#job-list").on("click",".edit-job",function (e) {
        //取当前信息并赋值
        var jobname = $(this).parents("tr").children(".job-name").text();
        var jobcom = $(this).parents("tr").children(".job-command").text();
        var jobcron = $(this).parents("tr").children(".job-cronExpr").text();

        $("#edit-name").val(jobname);
        $("#edit-command").val(jobcom);
        $("#edit-cron").val(jobcron);

        $("#edit-modal").modal('show');
    });

    $("#job-list").on("click",".delete-job",function (e) {
        var jobname = $(this).parents("tr").children(".job-name").text();
        $.ajax({
            url: '/job/delete',
            type: 'post',
            dataType: 'json',
            data:{
                name: jobname
            },
            complete:function () {
                window.location.reload()
            }

        })
        });

    $("#job-list").on("click",".kill-job",function (e) {
        var jobname = $(this).parents("tr").children(".job-name").text();
        $.ajax({
            url: '/job/kill',
            type: 'post',
            dataType: 'json',
            data:{
                name: jobname
            },
            complete:function () {
                alert("杀死任务命令已下发")
            }

        })
    });


    $('#save-job').on('click',function (e) {
        var jobInfo = {
            name: $('#edit-name').val(),
            command: $('#edit-command').val(),
            cronExpr: $('#edit-cron').val()
        };
        $.ajax({
            url:'/job/save',
            type: 'post',
            dataType: 'json',
            data:{
                job:JSON.stringify(jobInfo)
            },
            success: function (resp) {
                if(resp.errorNo!==0){
                    alert(resp.msg);
                    return
                }
                window.location.reload();
                alert("保存成功")
            }
        })
    });

    $('#new-job').on('click',function (e) {
       $('#edit-modal').modal('show');
    });
    refreshJobList()
})
</script>
</body>
</html>